<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-04-12 17:17:25
 * @LastEditTime: 2023-06-02 22:14:20
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\components\GlobalDrawer\index.vue
 * Copyright 版权声明
-->
<template>
  <div v-if="drawerVisible">
    <el-drawer
      v-model="drawerVisible"
      :close-on-click-modal="true"
      :before-close="handleClose"
      :size="drawerCurrent.drawerSize"
      custom-class="global-drawer"
      :title="drawerCurrent.drawerTypeName"
    >
      <template #header>
        <slot name="header">
          <h4>
            <template v-if="drawerHistory.length > 1">
              <el-icon class="back-icon" @click="handleGoBack()"><arrow-left /></el-icon>
            </template>
            <strong>{{drawerCurrent.drawerTypeName}}</strong>
          </h4>
        </slot>
      </template>
      <div
        class="drawer__body_in"
      >
        <!-- <component v-bind:is="drawerCurrent.drawerComponents"></component> -->
        <keep-alive v-if="drawerVisible" :include="drawerKeepAliveInclude">
          <component v-bind:is="drawerCurrent.drawerComponents" :key="drawerCurrent.drawerComponentsName"></component>
        </keep-alive>
      </div>
      <!-- <div class="el-drawer__footer"><button class="el-button el-button--default" type="button">v-if<span class="">关闭案发当时</span></button></div> -->
      <!-- <template #title>
        <slot name="title">
          <h4>{{drawerCurrent.drawerTypeName}}</h4>
        </slot>
      </template> -->
      <!-- <template #default>
        <slot>
          <keep-alive>
            <component v-bind:is="drawerCurrent.drawerComponents"></component>
          </keep-alive>
        </slot>
      </template> -->
      <!-- <template #footer>
        <slot name="footer">
          <div style="flex: auto">
            <el-button type="primary" @click="confirmClickDrawer">保存</el-button>
            <el-button @click="cancelClickDrawer">关闭</el-button>
          </div>
        </slot>
      </template> -->
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// 图标组件
import { ArrowLeft } from '@element-plus/icons-vue'

export default {
  name: 'Drawer',
  components: {
    ArrowLeft
  },
  computed: {
    ...mapGetters([
      'drawerVisible',
      'drawerCurrent',
      'drawerHistory',
      'drawerKeepAlive'
    ]),
    // 抽屉类型
    drawerType: function() {
      return this.drawerCurrent.drawerType
    },
    // 活跃抽屉集合
    drawerKeepAliveInclude: function() {
      const keyArr = Object.keys(this.drawerKeepAlive)
      return keyArr
    }
  },
  data() {
    return {
    }
  },
  created() {
  },
  beforeUnmount() {
  },
  methods: {
    // 返回上一个 drawer
    handleGoBack() {
      this.$store.dispatch('GoBackDrawer', {
      }).then(() => {
      }).catch(() => {
        // catch err
      })
    },
    // 关闭 drawer
    handleClose(done) {
      this.$store.dispatch('CloseDrawer', {
        direct: false
      }).then(() => {
        done()
      }).catch(() => {
        // catch err
      })
    }
    // // 抽屉内的确认按钮
    // async confirmClickDrawer() {
    // },
    // // 取消关闭抽屉
    // cancelClickDrawer() {
    //   this.handleClose()
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
// global-drawer
.global-drawer{
  .el-drawer__header{
    margin-bottom: 0;
    border-bottom: 1px solid #d1d1d1;
    padding: 15px 20px;
    h4 {
      margin: 0;
      .back-icon{
        margin-right: 10px;
        vertical-align: middle;
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
  .el-drawer__body{
    padding: 0;
    position: relative;
    overflow: hidden;
    .drawer__body_in{
    }
  }
  .el-drawer__footer{
    border-top: 1px solid #d1d1d1;
    padding: 15px 20px;
  }
}
</style>
